import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaForm, WeaSwitch } from 'comsMobx';
import {
  WeaFormItem, WeaSelect, WeaInputNumber, WeaNewScroll, WeaSearchGroup, WeaInput, WeaScope, WeaDialog,
  WeaTableEditable, WeaTextarea, WeaRightMenu, WeaTools, WeaLocaleProvider, WeaHelpfulTip,WeaAlertPage 
} from 'ecCom';
import { Button, Modal, Spin, message } from 'antd';
import html2canvas from './util/html2canvas.min.js';
import * as ReportUtil from '../../../../util/report';
import './util/seats';
import './util/jquery.seat-charts_pre.css';
const getKey = WeaTools.getKey;
const getLabel = WeaLocaleProvider.getLabel;

const store = ['seatStore', 'meetingDialog'];

@inject(...store)
@observer
export default class ArrangeSeats extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      leftdata: {},
      opValue: '1',
      rowVal: 10,
      colVal: 9,
      showRowSelect: true,
      fromitemhide: false,
      addLayoutVisible: false,
      modalVisible: false,
      dorefreshVisible: false,
      createLayoutVisible: false,
      save_noticeVisible: false,
      exportVisible: true,
      layout_type: '1',
      layout_style: '1', // 矩形： 1， 圆桌： 2  条形桌： 3
      select5: '1',
      select6: '1',
      circleTables: 1,
      circleSeats: 10,
      squareValue: [6, 6],
      exportLoading: false,
      outsideHrmModalVisible: false,
      isClickNoseathrm: true, // 点击未排座人员
      clickNoseathrmObj: {}, // 当前未排座人员
    };
    this.exportPreviewRef = React.createRef();
    this.setContainerLeftRef = React.createRef();
    this.meetingSeatLegendRef = React.createRef();
  }

  componentWillMount() {
    const { changeHrm, hrmObj, getFirstHrmName, selectedSeats, setState, getState,
      getBaseSetDatas, rightMenu, getSeatInfo, getSeatInfo_pre, getSeatLayoutTypeAddData } = this.props.seatStore;
    const { dialogStatus } = this.props.meetingDialog;
    setState({ roomId: this.props.roomId, meetingId: dialogStatus.meetingId });
    
    if (dialogStatus && dialogStatus.meetingId) {
      if (this.props.previewDisplay) {
        getSeatInfo_pre({ meetingId: dialogStatus.meetingId, viewType: '1' }, (map, hrmNameMap) => this.createSeatCharts(map, hrmNameMap));
      } else {
        getSeatInfo({ meetingId: dialogStatus.meetingId, viewType: '2' }, (map, hrmNameMap) => this.createSeatCharts(map, hrmNameMap));
      }
    } else {
      getBaseSetDatas({ roomId: this.props.roomId, typeId: '2' }, (map, hrmNameMap) => this.createSeatCharts(map, hrmNameMap));
    }

  }

  componentDidMount = () => {
    this.setState({exportVisible: false}); // 先把下载预览页面加载，然后隐藏，解决第一次获取不到节点
  }

  componentDidUpdate() {
    const { setState } = this.props.seatStore;
    if (this.refs.meetingArrangeDialog && this.refs.meetingArrangeDialog.state) {
      setState({ weadialogHeight: this.refs.meetingArrangeDialog.state.height });
    }
  }

  componentWillUnmount() {
  }

  closeModal = () => {
    this.setState({ modalVisible: false });
    this.clearFloatinglayer()
  }

  clearFloatinglayer = () => {
    $('.floatingLayer').remove();

  }

  clearBefore_set = (beforeDom, beforeSeatId) => {
    $(beforeDom).find('#' + beforeSeatId).removeAttr('hrmid').text($(beforeDom).find('#' + beforeSeatId).attr('label'));
    $(beforeDom).find('.opcityBlock, .close').remove();
  }

  changeSeat = (type) => {
    const { floatingLayer_before_dom, floatingLayer_end_dom, floatingLayer_before_seatId, floatingLayer_before_hrmId,
      floatingLayer_end_seatId, floatingLayer_end_hrmId, changeHrm,
      before_seat_label, end_seat_label, before_table_number, end_table_number
    } = this.props.seatStore;

    const getHrmName = (dom, seatid) => {
      return $(dom).find('#' + seatid).text();
    }
    const setHrmName = (dom, seatid, name) => {
      $(dom).find('#' + seatid).text(name);
    }
    const setSeatHrmid = (dom, seatid, hrmid) => {
      $(dom).find('#' + seatid).attr('hrmid', hrmid);
    }
    let beforeHrm = getHrmName(floatingLayer_before_dom, floatingLayer_before_seatId);
    let endHrm = getHrmName(floatingLayer_end_dom, floatingLayer_end_seatId);

    if (type == 'replacement') {
      setHrmName(floatingLayer_end_dom, floatingLayer_end_seatId, beforeHrm);

      changeHrm(floatingLayer_before_hrmId, floatingLayer_end_hrmId, floatingLayer_end_seatId, end_seat_label, end_table_number);

      setSeatHrmid(floatingLayer_end_dom, floatingLayer_end_seatId, floatingLayer_before_hrmId);
      this.clearBefore_set(floatingLayer_before_dom, floatingLayer_before_seatId);

      $.change_map($(floatingLayer_before_dom), { id: '', name: '' }, floatingLayer_before_seatId, 'arrange');
      $.change_map($(floatingLayer_end_dom), { id: floatingLayer_before_hrmId, name: beforeHrm }, floatingLayer_end_seatId, 'arrange');
    }
    if (type == 'exchange') {
      setHrmName(floatingLayer_before_dom, floatingLayer_before_seatId, endHrm);
      setSeatHrmid(floatingLayer_before_dom, floatingLayer_before_seatId, floatingLayer_end_hrmId);

      changeHrm(floatingLayer_before_hrmId, floatingLayer_end_hrmId, floatingLayer_end_seatId, end_seat_label, end_table_number);
      changeHrm(floatingLayer_end_hrmId, '', floatingLayer_before_seatId, before_seat_label, before_table_number);

      setHrmName(floatingLayer_end_dom, floatingLayer_end_seatId, beforeHrm);
      setSeatHrmid(floatingLayer_end_dom, floatingLayer_end_seatId, floatingLayer_before_hrmId);

      $.change_map($(floatingLayer_before_dom), { id: floatingLayer_end_hrmId, name: endHrm }, floatingLayer_before_seatId, 'arrange');
      $.change_map($(floatingLayer_end_dom), { id: floatingLayer_before_hrmId, name: beforeHrm }, floatingLayer_end_seatId, 'arrange');

    }
    this.clearFloatinglayer();
    this.setState({ modalVisible: false });
  }

  getModal = () => {
    const { modalVisible } = this.state;
    var buttons = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6ywfll@replacement`} type="primary" onClick={() => this.changeSeat('replacement')}>{getLabel('84563', '替换')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@iz2x7d@exchange`} type="primary" onClick={() => this.changeSeat('exchange')}>{getLabel('507017', '互换')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@gus6pa@closeModal`} onClick={() => this.closeModal()}>{getLabel('31129', '取消')}</Button>,
    ];
    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@5ove8j`}
        className='meeting-arrange-modal'
        visible={modalVisible}
        title={getLabel('386786', '信息确认')}
        icon="icon-coms-Prompt"
        iconBgcolor='#FFF'
        draggable={false}
        buttons={buttons}
        onCancel={() => this.closeModal()}
        style={{ height: 113, width: 368, }}
      >
        {getLabel('507018', '要进行人员互换还是替换？')}
      </WeaDialog>
    );
  }

  getOutsideHrmModal = () => {
    const { outsideHrmModalVisible, isClickNoseathrm, clickNoseathrmObj } = this.state;
    var buttons = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@h6zm0u@submit`} type="primary" onClick={() => {
        if (isClickNoseathrm) {
          this.selectedSeat_to_hrm('', clickNoseathrmObj);
        } else {
          window.clearHrm_pre && window.clearHrm_pre();
          window.clearHrm_pre = '';
        }
        this.setState({outsideHrmModalVisible: false})
      }}>{getLabel('33703', '确认')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1fbnou@cancel`} onClick={() => {
        this.setState({outsideHrmModalVisible: false})
      }}>{getLabel('31129', '取消')}</Button>,
    ];

    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@v33ok4`}
        className='meeting-arrange-modal'
        visible={outsideHrmModalVisible}
        title={getLabel('386786', '信息确认')}
        icon="icon-coms-Prompt"
        iconBgcolor='#FFF'
        draggable={false}
        buttons={buttons}
        onCancel={() => this.setState({outsideHrmModalVisible: false})}
        style={{ height: 113, width: 368, }}
      >
        {isClickNoseathrm ? getLabel('510273','替换后，外部人员信息将不再保存？') : getLabel('510274','删除后，外部人员信息将不再保存？') }
      </WeaDialog>
    );
  }

  doRefreshLayout = () => {
    const { dorefreshVisible } = this.state;
    var buttons = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@132a29@delMeetingSeat`} type="primary" onClick={() => {this.delMeetingSeat()}}>{getLabel('33703', '确认')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@gom6o7@cancel`} onClick={() => { this.setState({ dorefreshVisible: false }) }}>{getLabel('31129', '取消')}</Button>,
    ];
    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@e6vgz5`}
        className='meeting-arrange-modal'
        visible={dorefreshVisible}
        title={getLabel('386786', '信息确认')}
        icon="icon-coms-Prompt"
        iconBgcolor='#FFF'
        draggable={false}
        buttons={buttons}
        onCancel={() => this.setState({ dorefreshVisible: false })}
        style={{ height: 113, width: 368, }}
      >
        {getLabel('507476','确认更新座位布局吗？') }
      </WeaDialog>
    );
  }

  delMeetingSeat = () => { // 更新座位布局
    const { delMeetingSeat, meetingId, roomId, seatBaseDateChanged, retLayoutType, savedLayoutType, oldLayoutDel, getSeatInfo } = this.props.seatStore;
    let layout = oldLayoutDel ? retLayoutType : (seatBaseDateChanged ? savedLayoutType : '-9999');
    let getinfo_layout = oldLayoutDel ? '' : (seatBaseDateChanged ? savedLayoutType : '-9999');

    let params = {
      meetingId: meetingId,
      roomId: roomId,
      LayoutType: layout
    };
    delMeetingSeat(params, () => {
      this.setState({dorefreshVisible: false});
      getSeatInfo({ meetingId: meetingId, viewType: '2', address: roomId, layoutType: getinfo_layout }, (map, hrmNameMap) => this.createSeatCharts(map, hrmNameMap))
    });
  }

  renderSeatsItem = (domID, params) => {
    const { setState, roomId } = this.props.seatStore;
    let $each_map_item = $('<div class="seatCharts-container" id="' + domID + '" roomId="'+ roomId + '"></div>');
    let data = $each_map_item.seatCharts_pre(params);
    setState({ data: data });
    return [$each_map_item];
  }

  selectValue = (val, showname, key) => {
    const { fromitemhide } = this.state;
    switch (key) {
      case 1: this.setState({ layout_style: val, fromitemhide: !fromitemhide }); break;
      case 5: this.setState({ select5: val }); break;
      case 6: this.setState({ select6: val }); break;
    }
    if (key == 1) {
      $('#seat-map').find('div').remove();
    }
  }

  onChangeScope = (v) => {
    this.setState({ squareValue: v });
  }

  onchangeCircle = (val, key) => {
    if (key == 2) {
      this.setState({ circleTables: val });
    } else {
      this.setState({ circleSeats: val });
    }
  }

  createSeatCharts = (seatConfMap, hrmNameMap, callback) => {
    const { layout_style, squareValue, select5 } = this.state;
    const { baseDatas, tableModle, seatLabelStyle, rightMenu, setState, getState, selectedSeats, getFirstHrmName, changeHrm, oneself_seat } = this.props.seatStore;
    const { form, formData, circleSeats, circleTables, squareColumn, squareRow } = baseDatas;
    let model, map, row, col, circleCount;
    // model = layout_style;
    model = tableModle;
    // row = squareValue[0];
    // col = squareValue[1];
    row = parseInt(squareRow, 10);
    col = parseInt(squareColumn, 10);

    circleCount = circleSeats;
    map = $().getMap_pre(model, 'map', row, col, circleCount);
    if (seatConfMap) {
      if (seatConfMap.length == 0) {
        return;
      } else {
        map = seatConfMap[0];
      }
    }
    var params = {
      map: map, //MAPString MAP
      hrmNameMap: hrmNameMap,
      circleSeats: circleSeats,
      rightMenu: toJS(rightMenu), //RIGHTMENU1,
      model: tableModle,
      operationType: this.props.previewDisplay ? "only_pre" : 'preview',
      changeHrm: changeHrm,
      setState: setState,
      getState: getState,
      selectedSeats: selectedSeats,
      getFirstHrmName: getFirstHrmName,
      getModal: () => this.setState({ modalVisible: true }),
      getOutsideHrmModal: () => this.setState({outsideHrmModalVisible: true, isClickNoseathrm: false}),
      seatLabelStyle: seatLabelStyle, //座位编号类型
      countDirection: select5 == '1' ? 'left' : 'right',
      oneselfSeat: oneself_seat,
      seatLabel: [getLabel('507059', '排'), getLabel('507060', '座')],
      naming: {
        top: false,
        left: false,
      }
    };
    var chartRoot = [];
    $('#seat-map').children('div').remove();
    $(this.refs.seatmap).children('div').remove();
    if (model == '2') {// 圆桌
      for (let i = 1; i <= parseInt(circleTables, 10); i++) {
        chartRoot.push('seat-map_' + i);
        $(this.refs.seatmap).append(
          this.renderSeatsItem('seat-map_' + i, { ...params, seatType: 'circle', tableNum: i })
        );
      }
    } else if (model == '1') { // 矩形桌
      chartRoot.push('seat-map_1');
      $(this.refs.seatmap).append(
        this.renderSeatsItem('seat-map_1', { ...params, seatType: 'square', tableNum: 1 })
      );
    } else if (model == '4') { // 条形桌
      chartRoot.push('seat-map_1');
      $(this.refs.seatmap).append(
        this.renderSeatsItem('seat-map_1', { ...params, seatType: 'square', tableNum: 1 })
      );
    }

    setState({ seatChartsRoot: chartRoot });
    typeof (callback) == 'function' && callback();
  }

  getAddLayout = () => {
    let field = [];
    field.push(
      <div>
        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@yv7ncx@layoutInput`} style={{ width: '300px' }} />
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5iruak@submit`} type='primary' style={{ marginLeft: '20px' }}>{getLabel('33703', '确认')}</Button>
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@af5p3l@cancel`} type='' style={{ marginLeft: '10px' }} onClick={() => { this.setState({ addLayoutVisible: false }) }}>{getLabel('31129', '取消')}</Button>
      </div>
    );
    return field;
  }

  getSave_notice = () => {
    const { save_noticeDatas, } = this.props.seatStore;
    let { save_noticeform, save_noticeformData, } = save_noticeDatas;
    const { isFormInit } = save_noticeform;
    let group = [];
    // roomId name 
    var buttons = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@er5leq@submit`} type="primary" onClick={() => { this.sendRemindType() }}>{getLabel('33703', '确认')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@mui9dr@cancel`} type="" onClick={() => { this.setState({ save_noticeVisible: false }) }}>{getLabel('31129', '取消')}</Button>,
    ];
    save_noticeformData = toJS(save_noticeformData);
	  isFormInit && (save_noticeformData) && (save_noticeformData).map((c, index) => {
      let items = [];
      if(c.items[0].options.length){
        c.items.map(field => {
          let col = 1;
          if (field.conditionType.toUpperCase() == WeaTools.types.CASCADER) col = 1;
          items.push({
            com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@8vp4ax@${field.domkey[0]}`}
              label={`${field.label}`}
              labelCol={{ span: `${field.labelcol}` }}
              ratio1to2
              error={save_noticeform.getError(field)}
              tipPosition="bottom"
              wrapperCol={{ span: `${field.fieldcol}` }}>
              <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@lryoy4@${field.domkey[0]}`} fieldConfig={field} form={save_noticeform} onChange={(val) => { }} onBlur={() => { }} />
            </WeaFormItem>),
            col: col,
            hide: save_noticeform.isHide(field, (keys, allParams) => {
              let bool = false;
              return bool;
            })
          })
        });
      }else{
        items = [{
          com:
                 <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@7sgd9g@noData`}  
                 iconSize= {12}
                 icon={"icon-Meeting-Unhappy"}
                 >
                    <div style={{color : '#b2b2b2'}}>暂无数据</div>
                 </WeaAlertPage>
             
       }]
      
      }
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@9cw3fi@${index}`} needTigger={true} title={''} col={1} showGroup={c.defaultshow} items={items} />)
    });

    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@luzaxs`}
        className='set-remind-type'
        visible={this.state.save_noticeVisible}
        title={<div><span style={{ marginRight: 10 }}>{getLabel('501471','提醒方式')}</span><WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@6bv29j`} title={getLabel('507477','只对有座位的参会人员进行提示。') } placement="bottomLeft" /></div>}
        icon="icon-coms-meeting"
        iconBgcolor='#F14A2D'
        draggable={false}
        buttons={buttons}
        onCancel={() => this.setState({ save_noticeVisible: false })}
        style={{ height: 150, width: 560, }}
      >
        {group}
      </WeaDialog>
    );
  }

  getSeatTabStatus = () => {
    const { getSeatTabStatus, meetingId } = this.props.seatStore;
    const { dialogStatus } = this.props.meetingDialog;
    const { tabs } = toJS(dialogStatus);
    if(tabs && !tabs.meetingseat) {
      getSeatTabStatus({meetingId: meetingId});
    }
  }

  saveSettingDatas = (callback) => {
    let { baseDatas, meetingId, hrmInfo, seatsColordatas, saveSeatSetBaseData, seatChartsRoot, hrmObj, hrmObj_byOrganize, typeId,
      isSetting, saveSeatInfo, getSeatInfo, pre_address, pre_layoutType, pre_sortType, tableModle, savedLayoutType, retLayoutType,
      has_seatDatas, has_seatDatas_content, oldLayoutDel, oldSeatConfMap } = this.props.seatStore;
    let { getPreview } = this.props.meetingDialog;
    const { form } = baseDatas;
    const { colorList } = toJS(hrmInfo);
    let chartMap = [];
    seatChartsRoot = toJS(seatChartsRoot);
    seatChartsRoot && (seatChartsRoot).map(res => {
      let map = $(this.refs.seatmap).find("#" + res).data('map');
      chartMap.push(map);
    })
    if (parseInt(pre_sortType, 10) == 1) { // 按组织结构
      hrmObj = hrmObj_byOrganize;
    }

    if (hrmObj) {// 设置座位类型
      hrmObj = toJS(hrmObj).map(res => {
        return { ...res, styleType: tableModle };
      })
    }

    // 单独处理外部人员 - start
    let outSideArr = [];
    let outSideArrObj = [];
    let clearHrmObj = [];

    if (hrmObj) {// 清空外部人员
      toJS(hrmObj).map(res => {
        if (res.id !== '-1') {
          clearHrmObj.push(res);
        };
      })
    }

    Array.isArray(chartMap) && chartMap.map((r, i) => {
      Array.isArray(r) && r.map((v,t) => {
        Array.isArray(v) && v.map(p => {
          if (p && p.hrmid === "outsideHrm") {
            outSideArr.push(p);
          }
        });
      });
    }); 
    if (outSideArr.length > 0) {
      outSideArr.map(res => {
        let hr = {
          id: '-1',
          isArrange: true,
          isEditLabel: res.isEditLabel || false,
          isRemind: res.isRemind || false,
          memberType: '3',
          name: res.showname,
          roomid: res.roomid || '',
          seatId: res.seatId,
          seatLabel: res.seatLabel,
          seatLabel_def: res.seatLabel_def || '',
          self: false,
          styleType: res.styleType,
          tableNum: res.tableNum,
        }
        outSideArrObj.push(hr);
      });
    }
    hrmObj = clearHrmObj.concat(outSideArrObj);
    // 单独处理外部人员 - end

    if (isSetting) {
      let params = {
        meetingId: meetingId,
        layoutType: pre_layoutType,
        address: pre_address,
        seatDatas: JSON.stringify(chartMap),
        seatedInfo: JSON.stringify(hrmObj),
        sortType: pre_sortType,
        oldSeatConfMap: has_seatDatas ? oldSeatConfMap : has_seatDatas_content,
        colorList: JSON.stringify(colorList),
        styleType: tableModle
      };
      if (!oldLayoutDel) {
        if (savedLayoutType == pre_layoutType) {
          saveSeatInfo(params, () => {
            typeof (callback) == 'function' && callback();
            this.getSeatTabStatus();
            getSeatInfo({ meetingId: meetingId, viewType: '2', layoutType: pre_layoutType, address: pre_address, }, (map, hrmNameMap) => this.createSeatCharts(map, hrmNameMap))
            getPreview({ meetingid: meetingId });
          });
        } else {
          Modal.confirm({
            title: getLabel('507117', '保存之后将替换之前布局,确定保存吗?'),
            onOk: () => {
              saveSeatInfo(params, () => {
                typeof (callback) == 'function' && callback();
                this.getSeatTabStatus();
                getSeatInfo({ meetingId: meetingId, viewType: '2', layoutType: pre_layoutType, address: pre_address, }, (map, hrmNameMap) => this.createSeatCharts(map, hrmNameMap))
                getPreview({ meetingid: meetingId });
              });
            }
          })
        }
      } else {
        message.error(getLabel('507478','后台布局已被删除，请重新生成布局！') );
      }
    } else {
      let params = {
        roomId: '1',
        datas: JSON.stringify(toJS(seatsColordatas)),
        seatConfMap: JSON.stringify(chartMap),
        ...form.getFormParams(),
        typeId: typeId,
      };
      saveSeatSetBaseData(params);
    }
  }

  saveSettingDatas_notice = () => {
    const { getSave_notice } = this.props.seatStore;
    this.saveSettingDatas(() => this.setState({ save_noticeVisible: true }, () => getSave_notice()));
  }

  getDialogButton = () => {
    let field = [];
    const { spinning, setState } = this.props.seatStore;
    field.push(
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@29riui@downLoadSeat`} loading={spinning} disabled={spinning} type='primary' onClick={() => this.setState({exportVisible: true}, ()=>this.getExportPreveiw())}>{getLabel('508224','下载座位图')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@e2rf0m@save`} loading={spinning} disabled={spinning} type='primary' onClick={() => this.saveSettingDatas()}>{getLabel('30986', '保存')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@193zfq@saveAndRemind`} loading={spinning} disabled={spinning} type='primary' onClick={() => this.saveSettingDatas_notice()}>{getLabel('507479','保存并通知座位号')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@wzhboh@cancel`} onClick={() => { setState({ seatLayoutSettingVisible: false }) }} >{getLabel('31129', '取消')}</Button>
    );
    return field;
  }

  addLayout = () => {
    const { getSeatLayoutTypeAddData } = this.props.seatStore;
    getSeatLayoutTypeAddData('', () => this.setState({ createLayoutVisible: true }));
  }

  formItemChange = (data) => {
    const { setState, setBaseDatas, getBaseSetDatas, seatConfMap } = this.props.seatStore;
    if (data.styleType) {
      setState({ tableModle: data.styleType.value });
      $('#seat-map').find('div').remove();
    }
    if (data.eachTableSeats) {
      setBaseDatas({ circleSeats: data.eachTableSeats.value });
    }
    if (data.squareTableNumber) {
      setBaseDatas({ circleTables: data.squareTableNumber.value });
    }
    if (data.row__column) {
      setBaseDatas({ squareColumn: data.row__column.value[1], squareRow: data.row__column.value[0] });
    }
    if (data.seatCodeType) {
      setState({ seatLabelStyle: data.seatCodeType.value });
    }
    if (data.typeId) {
      $('#seat-map').find('div').remove();
      setState({ typeId: data.typeId.value });
      getBaseSetDatas({ roomId: '1', typeId: data.typeId.value }, (map, hrmNameMap) => this.createSeatCharts(map, hrmNameMap));
    }

  }

  willDelete = (datas, keys) => new Promise((resolve, reject) => {
    Modal.confirm({
      title: getLabel('127574', '确定删除吗？'),
      onOk: () => resolve(true),
      onCancel: () => resolve(false),
    })
  })

  getRowSelection = rowSelection => {
    const sel = { ...rowSelection };
    sel.getCheckboxProps = record => {
      return { disabled: record.id === "1" };
    };
    return this.state.showRowSelect ? sel : null;
  };

  saveAddseatlayout = () => {
    const { addSeatLayoutType, addDatas, roomId } = this.props.seatStore;
    const { addform, } = addDatas;
    addform.validateForm().then(f => {
      if (f.isValid) {
        let params = { roomId: roomId, ...addform.getFormParams() };
        this.setState({ createLayoutVisible: false });
        addSeatLayoutType(params);
      } else {
        f.showErrors();
      }
    });
  }

  // 保存通知类型
  sendRemindType = () => {
    const { save_noticeDatas, meetingId, sendSeatMsg,setState } = this.props.seatStore;
    const { save_noticeform, save_noticeformData} = save_noticeDatas;
    save_noticeform.validateForm().then(f => {
      if (f.isValid) {
        let params = { meetingId: meetingId, ...save_noticeform.getFormParams() };
        this.setState({ createLayoutVisible: false });

        sendSeatMsg(params, () => this.setState({ save_noticeVisible: false }));
      } else {
        if(save_noticeformData&&save_noticeformData[0].items[0].options.length){
          f.showErrors();
        }else{
          let params = { meetingId: meetingId, ...save_noticeform.getFormParams() };
          this.setState({ createLayoutVisible: false });
          this.setState({ save_noticeVisible: false });
        }
      }
    });
  }

  getOperationNotice = (type) => {
    let field = [];
    let content = [];
    type == 'set' && content.push(
      <div>
        <h3>{getLabel('507022', '一、生成布局样式')}</h3>
        <p>{getLabel('507023', '1.右侧座位布局样式选择后，点击"生成"，在左侧自动创建自定义的座位布局。')}</p>
        <p>{getLabel('507024', '2.矩形布局的座位编号有三种样式选择。纯数字(整数自增)。"行列形式(1_1,2_1)"表示第一排开始数为1_1，第二行开始为2_1。字母数字(A1,A2；B1,B2)，A/B表示行，数字表示所在列。')}</p>
        <p>{getLabel('507025', '3.座位类型中的类别名称，都会出现在操作菜单中。且"过道/默认座位/点击选中座位/已排座”的颜色系统默认选择。')}</p>
        <h3>{getLabel('507026', '二、自定义布局调整操作')}</h3>
        {/* <p>{getLabel('507027', '按"Ctrl"键，鼠标点击可连续选中多个座位。选中后，右键出现操作菜单。')}</p> */}
        <h3>{getLabel('507028', '三、添加多个布局样式')}</h3>
        <p>{getLabel('507029', '一个会议室可以有多个布局样式；可点击"添加多个布局样式"添加。')}</p>
      </div>
    )
    type == 'preview' && content.push(
      <div>
        <p>{getLabel('507030', '1、未排座人员选座：')}</p>
        <p>{getLabel('507031', '先点击座位，再点击选中未排座人，可以完成占位。')}</p>
        <p>{getLabel('507032', '2、已占座的人员替换和互换：')}</p>
        <p>{getLabel('507033', '点击选中某个已排座的座位，可拖拽进行人员替换和互换。对象座位已排座时，进行提示，可具体选择人员替换或者互换。')}</p>
        <p>{getLabel('507034', '3、取消已排座人员：')}</p>
        <p>{getLabel('507035', '选中某个已排座的座位时，会出现"X"号。点击之后，取消该人员的占座。')}</p>
        <p>{getLabel('510275','4、自定义排座：') }</p>
        <p>{getLabel('510276','双击座位可为外部人员排座。') }</p>
      </div>
    )
    field.push({
      com: content,
      colSpan: 1,
      hide: false,
    });
    return <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@4hjgiy`} title={getLabel('19010', '操作说明')} showGroup={true} col={1} items={field} />;
  }

  onchangSelectMeetingroom = (value, showname, type) => {
    const { getSeatInfo, setState, pre_layoutType, pre_address, meetingId, savedLayoutType } = this.props.seatStore;
    $('#seat-map').find('div').remove();
    let params = {};
    if (type == 'address') {
      setState({ pre_address: value, roomId: value });
      params = { address: value };
    }
    if (type == 'layoutType') {
      setState({ pre_layoutType: value });
      params = { layoutType: value, address: pre_address };
    }
    if (!(value == savedLayoutType) && type == 'layoutType') { // 切换布局时，显示所有参会人员
      getSeatInfo({ meetingId: meetingId, viewType: '2', ...params }, (map, hrmNameMap) => this.createSeatCharts(map, hrmNameMap, () => this.clear_hrm()))
    } else {
      getSeatInfo({ meetingId: meetingId, viewType: '2', ...params }, (map, hrmNameMap) => this.createSeatCharts(map, hrmNameMap))
    }
  }

  getMeetingRoom = (params) => {
    if (this.props.meetingId) {
      const { seatInfo, pre_address, pre_layoutType, seatBaseDateChanged, oldLayoutDel, hrmInfo } = this.props.seatStore;
      const { fieldList } = toJS(seatInfo);

      let formField = fieldList && fieldList[0] && fieldList[0].items || [];
      let field = [];
      let fields = [];

      const input = (res) => {
        if (res) {
          if (res.domkey[0] === 'seatSymbol') {
            // 座位图例
            return (this.getSeatLegend())
          } else {
            return (
              <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@gw0cnl`}
                className={res.domkey[0] == 'layoutType' ? 'refresh-item' : ''}
                label={res.label}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: res.domkey[0] == 'layoutType' ? 18 : 12 }}
              >
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@bye75q`} options={res.options} value={res.domkey && res.domkey[0] == 'address' ? pre_address : pre_layoutType} onChange={(value, showname) => { this.onchangSelectMeetingroom(value, showname, res.domkey[0]) }} />
                {res.domkey[0] == 'layoutType' && (oldLayoutDel || seatBaseDateChanged) && <div className='do-refresh' onClick={() => this.setState({ dorefreshVisible: true })}>
                  <img src={require('./util/dorefresh.png')} className="" title={oldLayoutDel ? getLabel('507480','座位布局后台已经删除，可点击更新')  : getLabel('507481','有新的座位布局，可点击更新')} style={{ color: '#ffb522' }} />
                </div>}
              </WeaFormItem>
            );
          }
        }
      }
      formField.map(res => {
        if(res) {
          if(res.domkey[0] === 'sortType' || res.domkey[0] === 'unseatedOutSysMember') {
          } else if(res.domkey[0] === 'unseatedMember') {  // 未排座人员
            field.push(...this.getArrangeSeat('hrm'));
          }else if( res.domkey[0] === 'unseatedCrm' ) { // 未排座客户
            field.push(...this.getArrangeSeat('crm'));
          }else{
            field.push({
              com: input(res),
              colSpan: 1,
              hide: false
            });
          }
        }
      })

      return <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@2g390e`} title={getLabel('506712', '选择会议室及其布局类型')} showGroup={true} col={1} items={field} />;
    }
  }

  getSeatLegend = (type) => {
    let { seatLayoutSettingVisible, seatInfo, pre_seat_chart, display_fieldList } = this.props.seatStore;
    let temp_arr = [];
    let temp_col = 4;
    display_fieldList = toJS(display_fieldList);
    if (seatLayoutSettingVisible) {
      temp_arr = pre_seat_chart;
    } else if (type == 'display') {
      temp_arr = (display_fieldList) && (display_fieldList[1]) && (display_fieldList[1].items) || [];
      temp_col = 1;
    } else {

    }
    let field = [];
    let set_field = [];
    const input = (res, classname) => {
      return (
        <div className={res.key == '-3' ? `${classname} onself-seat` : classname}>
          <div className='div'>
            <div className={res.key == '-3' ? 'color-area oneself' : (res.key == '-1' ? 'color-area screen' : 'color-area')} style={{ backgroundColor: res.bgcolor }}>
              {res.key == '-1' && res.showname}
              {res.key == '-3' && <i className="icon-coms-man" size={'small'} style={{ color: '#fff' }} />}
            </div>
          </div>
          <div className={res.key == '-1' ? 'div showname div-screen' : 'div showname'} title={res.showname} >{res.showname}</div>
        </div>
      );
    }

    if (type == 'display') {
      temp_arr && temp_arr.map(res => {
        field.push({
          com: input(res, 'legend-box'),
          colSpan: 1,
          hide: false
        });
      });
      return <div className={'meeting-seat-legend'}><WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@j9epxo`} title={getLabel('506702', '座位图例')} showGroup={true} col={temp_col} items={field} /></div>;
    } else {
      temp_arr && temp_arr.map(res => {
        set_field.push(input(res, 'legend-box legend-box-set'));
      });
      return (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4knw1d`}
          labelCol={{ span: 0 }}
          wrapperCol={{ span: 24 }}
        ><div id="meetingSeatLegend" ref={this.meetingSeatLegendRef} className={'meeting-seat-legend meeting-seat-legend-set'}>{set_field}</div>
        </WeaFormItem>
      )
    }
  }

  selectedHrm_to_seat = (e, obj) => { // 暂时不用
    // 方式1：先点击人员再点击桌位排座
    let temp = [];
    const { hrmObj, changHrmColor } = this.props.seatStore;
    $('#hrm-content').data('hrms') && temp.push(...$('#hrm-content').data('hrms'));
    let id = $(e.target).attr('id');
    if ($(e.target).attr('hrmid')) {
      $(e.target).removeAttr('hrmid');
      changHrmColor(id, '');
      let arr = [];
      temp ? temp = temp.map(res => {
        if (res.id == obj.id) {
        } else {
          arr.push(res);
        }
      }) : '';
      temp = arr;
      $('#hrm-content').data('hrms', (temp)); // 保存需要排座的人员信息
    } else {
      temp.push(obj);
      $('#hrm-content').data('hrms', (temp)); // 保存需要排座的人员信息
      $(e.target).attr({ hrmid: obj.id });
      changHrmColor(id, '#68CB00');
    }
    setTimeout(() => {
      const { hrmObj } = this.props.seatStore;

    }, 1000)
  }

  selectedSeat_to_hrm = (e, obj) => {
    // 方式2：先点击桌位再点击人员排座
    const { seat_isselected, setState, changeHrm, seat_currentSeatId, seat_oldHrmId, seat_parnetDOM,
      floatingLayer_before_seatId, before_table_number, before_seat_label
    } = this.props.seatStore;
    if (seat_isselected && $(seat_parnetDOM).find('#' + seat_currentSeatId).children('.opcityBlock').length > 0) {
      $(seat_parnetDOM).find('#' + seat_currentSeatId)
        .attr('hrmid', obj.id)
        .text(obj.name);
      changeHrm(obj.id, seat_oldHrmId, floatingLayer_before_seatId, before_seat_label, before_table_number);
      setState({ seat_isselected: false });
      $.change_map($(seat_parnetDOM), obj, seat_currentSeatId, 'arrange');
    }
  }

  clickHrm = (e, obj) => {
    const { seat_currentSeatId, seat_parnetDOM,  } = this.props.seatStore;
    if ( $(seat_parnetDOM).find('#' + seat_currentSeatId).attr('hrmid') == 'outsideHrm' ) {
      this.setState({outsideHrmModalVisible: true, isClickNoseathrm: true, clickNoseathrmObj: obj})
    } else {
      this.selectedSeat_to_hrm(e, obj);
    }
    return false;
  }

  getArrangeSeat = (type) => { // 未排座人员
    let field = [];
    let set_field = [];
    let { hrmObj, hrmObj_byOrganize, changeHrm, seatInfo, setState, pre_sortType, display_fieldList, unseated_person_hide,
      getSeatInfo_pre, meetingId, display_layout, display_address, arrangeSeatForm, hrmInfo, arrangeSeatForm_crm, } = this.props.seatStore;
    const { fieldList } = toJS(seatInfo);
    let { depMap, subMap } = toJS(hrmInfo);
    let temp_fields = arrangeSeatForm; // 排座方式，未排座人员
    let t_hide = true;
    if (parseInt(pre_sortType, 10) == 1) { // 按组织结构
      hrmObj = hrmObj_byOrganize;
    }
    display_fieldList = toJS(display_fieldList);
    if (this.props.previewDisplay) {
      temp_fields = display_fieldList && display_fieldList[0] && display_fieldList[0].items || [];
    }

    if (type == 'crm') {
      temp_fields = arrangeSeatForm_crm;
    }

    const hrm_list = (hrms) => {
      let field = [];
      hrms && hrms.map(res => {
        let titleStr = `${subMap[res.id]}/${depMap[res.id]}`;
        if (!res.isArrange || res.isArrange == 'false') { // 未排座
          if (type == 'crm' && res.memberType == '1') { return }
          if (type == 'hrm' && res.memberType == '2') { return }
          field.push(
            <div className='arrangeSeat-hrm' title={(subMap[res.id] === undefined || depMap[res.id] === undefined) ? res.name : titleStr} style={{ backgroundColor: res.bgcolor }} id={res.id} onClick={(e) => this.clickHrm(e, res)}>
              {res.name}
            </div>
          );
          t_hide = t_hide * false;
        }else{ // 已排座
          t_hide = t_hide * true;
        }
      })
    
      return (<div className='hrm-content' id={'hrm-content'}>{field}</div>)
    }
    const input = (res) => {
      return (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@qzads0`}
          className={'select-button'}
          label={res.label}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          {res.domkey[0] == 'sortType' && <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@1lqopu`} value={pre_sortType} options={res.options} onChange={(value, showname) => { setState({ pre_sortType: value }, () => this.clear_hrm()) }} />}
          {res.domkey[0] == 'sortType' && (pre_sortType == '1' || pre_sortType == '2') && <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6brvnv`} type='primary' style={{ marginLeft: '13px' }} onClick={() => { this.clear_hrm(this.batchSeating, true) }}>{getLabel('506703', '排座')}</Button>}
          {res.domkey[0] == 'unseatedMember' && hrm_list(hrmObj)}
          {res.domkey[0] == 'unseatedCrm' && hrm_list(hrmObj)}
        </WeaFormItem>
      );
    }

    const input_display = (res) => {
      return (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@6ppsgc`}
          className={'input-display'}
          label={res.label}
          labelCol={{ span: 0 }}
          wrapperCol={{ span: 24 }}
        >
          {<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@tg1soi`} options={res.options} value={display_address}
            onChange={(value, showname) => {
              setState({ pre_sortType: value },
                () => getSeatInfo_pre({ meetingId: meetingId, viewType: '1', address: value }, (map, hrmNameMap) => this.createSeatCharts(map, hrmNameMap))
              )
            }} />}
        </WeaFormItem>
      );
    }

    temp_fields && temp_fields.map(res => {
      field.push({
        com: this.props.previewDisplay ? input_display(res) : input(res),
        colSpan: 1,
        hide: this.props.previewDisplay ?
          false
          :
          (res.domkey[0] == 'unseatedMember'||res.domkey[0] == 'unseatedCrm') ? t_hide : false
      });
    })

    if (type == 'display') {
      return <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@580hlh`} title={this.props.previewDisplay ? getLabel('780', '会议室') : ''} showGroup={true} col={1} items={field} />;
    } else if (type == 'crm') {
      return field;
    } else {
      return field;
    }
  }

  clear_hrm = (callback, isClickArrangeSeat) => { //isClickArrangeSeat 点击排座按钮，区别切换于切换排座方式
    let { hrmObj, changeHrm, hrmObj_byOrganize, pre_sortType, roomId } = this.props.seatStore;
    if (parseInt(pre_sortType, 10) == 1) { // 按组织结构
      hrmObj = hrmObj_byOrganize;
    }
    $.batch_Seating(isClickArrangeSeat, toJS(hrmObj), changeHrm, true, roomId);

    typeof (callback) == 'function' && callback(isClickArrangeSeat)
  }

  batchSeating = (isClickArrangeSeat) => {
    let { hrmObj, changeHrm, hrmObj_byOrganize, pre_sortType, } = this.props.seatStore;
    if (parseInt(pre_sortType, 10) == 1) { // 按组织结构
      hrmObj = hrmObj_byOrganize;
    }
    $.batch_Seating(isClickArrangeSeat, toJS(hrmObj), changeHrm);
  }

  getLeft = (type) => {
    let field = [];
    const { layout_style } = this.state;
    const { data, tableModle, spinning } = this.props.seatStore;
    field.push(
      <div id="setContainerLeft" ref={this.setContainerLeftRef} className='set-container-left' style={{ height: type == 'display' ? this.props.height : '' }}>
        {/* <WeaRightMenu datas={menu}> */}
          <div id='seat-map' ref='seatmap' className={tableModle == '4' ? 'strip-table' : (tableModle == '2' ? 'circle-table' : '')}>
            <span id='screen' className='screen'><span>{getLabel('506837', '屏幕')}</span></span>
          </div>
        {/* </WeaRightMenu> */}
      </div>
    );
    return field;
  }

  getPreview = () => {
    const { seatInfo, } = this.props.seatStore;
    const { seatInfoForm, } = toJS(seatInfo);
    const { isFormInit } = seatInfoForm;
    return [
      this.getMeetingRoom(),
      // this.getSeatLegend(),
      // this.getArrangeSeat(),
      this.getOperationNotice('preview')
    ];
  }

  getPreview_display = () => {
    return [
      this.getArrangeSeat('display'),
      this.getSeatLegend('display'),
    ];
  }

  getRight = () => {
    let field = [];
    let temp = false;
    const { seatInfo, isClear } = this.props.seatStore;
    field.push(
      <div className='set-container-right'>
        <div className='left-header'>
          <span title={getLabel('507064', '座位布局与排座')}>{getLabel('507064', '座位布局与排座')}</span>
        </div>
        <div className='left-content' >
          {
            this.getPreview()
          }
        </div>
      </div>
    );
    return field;
  }

  displayRight = () => {
    let field = [];
    let temp = false;
    const { seatInfo, hrmObj_byOrganize, hrmObj } = this.props.seatStore;
    field.push(
      <div className='set-container-right set-container-right-display' style={{ height: this.props.height }}>
        <div className='left-header'>
          <span title={getLabel('507065', '会议室与座位图例')}>{getLabel('507065', '会议室与座位图例')}</span>
        </div>
        <div className='left-content left-content-display'>
          {/* <WeaNewScroll
            height={404}
          > */}
          {this.getPreview_display()}
          {/* </WeaNewScroll> */}
        </div>
      </div>
    );
    return field;
  }

  onScale = () => {
    setTimeout(() => {
      const { setState } = this.props.seatStore;
      if (this.refs.meetingArrangeDialog && this.refs.meetingArrangeDialog.state) {
        setState({ weadialogHeight: this.refs.meetingArrangeDialog.state.height });
      }
    }, 250);
  }

  getExportPreveiw = () => {
    if (this.exportPreviewRef && this.exportPreviewRef.current) {
      if(this.setContainerLeftRef && this.setContainerLeftRef.current) {
        $(this.exportPreviewRef.current).append(this.setContainerLeftRef.current.cloneNode(true));
      }
      if(this.meetingSeatLegendRef && this.meetingSeatLegendRef.current) {
        $(this.exportPreviewRef.current).append(this.meetingSeatLegendRef.current.cloneNode(true));
      }
    }
  }

  downloadSeatcharts = () => {
    let id = '#exportPreview';
    let H1=0;
    let legengBox=document.getElementsByClassName("preview-seat-legend")[0].getElementsByClassName("showname")
    for(var i=0;i<legengBox.length;i++){
      H1+=legengBox[i].clientHeight+14
    }
    let H = $(this.exportPreviewRef.current).find('#seat-map_1').height()+100;
    let W = $(this.exportPreviewRef.current).find('#seat-map_1').width()+300;
    if (W < 1000) {
      W = 1000;
    }
    if(H<H1){
      H=H1+60
    }

    let canvas_dom = document.querySelector(id);
    this.setState({exportLoading: true});
    html2canvas(this.exportPreviewRef.current, {
      height: H,
      width: W,
      logging: false,
    }).then(canvas => {
      var timestamp = Date.parse(new Date());

      ReportUtil.downloadCvs2Img(canvas, timestamp);
      this.setState({exportLoading: false});
  });
  }

  render() {
    const { spinning, setState, seatLayoutSettingVisible, seatInfo, hrmObj_byOrganize, hrmObj, isSingle, weadialogHeight } = this.props.seatStore;
    const { exportVisible,exportLoading } = this.state;
    let class_name = isSingle ? 'meeting-arrange-seats_pre meeting-arrange-isSingle'
      : 'meeting-arrange-seats_pre meeting-arrange-seats-preview';
    return (
      this.props.previewDisplay ?
        <div className={class_name}>
          <div style={{ height: isSingle ? jQuery('.arrangeSeatInfo').height() : '' }}>
            {this.getLeft('display')}
            {this.displayRight()}
          </div>
        </div>
        :
        <div>
          <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@7uuleh`}
            title={getLabel('509517', '座位排座设置')}
            icon="icon-coms-meeting"
            iconBgcolor='#F14A2D'
            visible={seatLayoutSettingVisible}
            ref='meetingArrangeDialog'
            draggable={false}
            scalable={true}
            style={{ height: 672, width: 1230 }}
            onCancel={() => { setState({ seatLayoutSettingVisible: false }) }}
            buttons={this.getDialogButton()}
            moreBtn={this.getDialogButton()}
            onScale={() => { this.onScale() }}
            destroyBodyOnClose={true}
          >
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@ypyx3e`} spinning={spinning}>
              <div className='meeting-arrange-seats_pre'
                style={{ height: weadialogHeight }}
              >
                {this.getLeft()}
                {this.getRight()}
              </div>
            </Spin>
          </WeaDialog>
          {this.getModal()}
          {this.getOutsideHrmModal()}
          {this.doRefreshLayout()}
          {this.getSave_notice()}
          {
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@iy3vpn`}
              title={getLabel('508225','下载预览')}
              icon="icon-coms-meeting"
              iconBgcolor='#F14A2D'
              onCancel={() => this.setState({ exportVisible: false })}
              className="preview-seat-legend"
              visible={exportVisible}
              style={{ width: 1000, height: 800 }}
              buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2acjug@download`} loading={exportLoading} disabled={exportLoading} type='primary' onClick={()=>this.downloadSeatcharts()}>{getLabel('31156','下载')}</Button>]}
              hasScroll={true}
            >
              <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@8csxtu`}
                height={"100%"}
                width={'100%'}
                direction={'h'}
              >
                {<div id="exportPreview" ref={this.exportPreviewRef} className="meeting-arrange-seats_pre "></div>}
              </WeaNewScroll>
            </WeaDialog>
          }
        </div>
    );
  }
}